<template>
    <van-dialog
        v-model="isShow"
        width="241px"
        :showConfirmButton="false"
        class="worktime-error-container"
        :before-close="close"
        :close-on-click-overlay="true"
    >
        <img :src="image" alt="" />
        <p class="title" v-show="show && isWorkDay">当前非视频服务工作时间</p>
        <p class="title" v-show="!isWorkDay" style="height: 20px;font-size: 14px;">非视频服务工作日</p>
        <div class="content-section" v-show="show && isWorkDay">
            <div class="content-wrapper">
                <p class="content">
                    <span>工作日：</span
                    ><span v-if="workTime[0]">
                        {{ workTime[0].startTime.slice(0, 5) }} -
                        {{ workTime[0].endTime.slice(0, 5) }}
                    </span>
                </p>
                <p class="content">
                    <span>周末：</span
                    ><span v-if="workTime[1]">
                        {{ workTime[1].startTime.slice(0, 5) }} -
                        {{ workTime[1].endTime.slice(0, 5) }}
                    </span>
                </p>
            </div>
        </div>
        <div class="sub-title">如有需要，请拨打我们的24小时服务热线</div>
        <!-- <div class="sub-title">400-700-5652寻求支持</div> -->
        <!-- 4007005652 -->
         <div class="button-wrapper">
            <a href="tel:4007005652" class="button-hotline">呼叫热线</a>
            <van-button type="default" @click="close">返回</van-button>
         </div>
    </van-dialog>
</template>

<script>
import Vue from "vue";
import { Button, Toast } from "vant";
Vue.use(Button);
Vue.use(Toast);
export default {
    components: {},
    props: {
        workTime: {
            type: Array,
            default: () => [],
        },
        isWorkDay: {
            type: Boolean,
            default: true,
        },
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            image: require("../../assets/img/worktime.png"),
            isShow: false,
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.worktime-error-container {
    padding-bottom: 20px;
    .sub-title{
        font-size: 12px;
        font-weight: 400;
        color: #7f8284;
        line-height: 15px;
        height: 20px;
        margin: 20px 0 14px 0;
        text-align: center;
    }
    img {
        width: 100%;
        object-fit: contain;
        height: 139px;
        background: #fcf5f5;
    }

    .title {
        font-size: 15px;
        font-weight: bold;
        color: #242728;
        line-height: 21px;
        margin: 12px 0 8px 0;
    }

    .content-section {
        display: flex;
        justify-content: center;
        .content-wrapper {
            width: fit-content;
            text-align: left;
            .content {
                font-size: 12px;
                font-weight: 400;
                color: #7f8284;
                line-height: 17px;
                margin: 0;
            }
        }
    }

    .van-button {
        width: 42%;
        height: 42px;
        background: #dcdee0;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        border: none;
        color: #fff;
    }

    .button-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        // margin-top: 25px;
        width: 100%;

        .button-hotline {
            width: 42%;
            height: 42px;
            background: linear-gradient(180deg, #f34651 0%, #d61c22 100%);
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
            border-radius: 4px;
            border: none;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            line-height: 19px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-decoration: none;
        }
    }
}
</style>
